﻿<template>
  <div class="SHZY-common-layout">
    <div class="SHZY-common-layout-center">
      <el-row class="SHZY-common-search-box" :gutter="16">
        <el-form @submit.native.prevent="">
          <el-col :span="6">
            <el-form-item label="做番号 ">
              <el-input v-model="query.no" placeholder="做番号 " clearable @keyup.enter.native="search" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品型号">
              <el-input v-model="query.model" placeholder="产品型号" clearable @keyup.enter.native="search" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="query.printStatus" placeholder="请选择" clearable :style="{ width: '100%' }">
                <el-option v-for="(item, index) in status" :key="index" :label="item.fullName"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <template v-if="showAll">
            <el-col :span="6">
              <el-form-item label="扫描状态">
                <el-select v-model="query.scanStatus" placeholder="请选择" clearable :style="{ width: '100%' }">
                  <el-option v-for="(item, index) in ScanstatuList" :key="index" :label="item.fullName"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="箱号">
                <el-input v-model="query.boxNo" placeholder="箱号" @keyup.enter.native="search" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="图号">
                <el-input v-model="query.drawingNo" placeholder="图号" @keyup.enter.native="search" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="部件名称">
                <el-input v-model="query.componentName" placeholder="部件名称" @keyup.enter.native="search" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规格">
                <el-input v-model="query.specifications" placeholder="规格" @keyup.enter.native="search" clearable />
              </el-form-item>
            </el-col>


          </template>

          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>

              <el-button type="primary" icon="el-icon-refresh" @click="Synchronization()">同步</el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="SHZY-common-layout-main SHZY-flex-main">
        <div class="SHZY-common-head">
          <div>
            <el-button type="primary" icon="el-icon-printer" @click="handleBatchPrint()">打印</el-button>
            <el-button type="primary" icon="el-icon-circle-close" @click="handleBatchClose()">关闭</el-button>
            <el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
          </div>
          <div class="SHZY-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh SHZY-common-head-icon" :underline="false" @click="reset()" />
            </el-tooltip>
          </div>
        </div>
        <SHZY-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange" custom-column>
          <el-table-column label="做番号 " prop="no" align="left" width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button 
                type="text" @click="showCode(scope.row.no)">{{ scope.row.no
                }}</el-button>
            

            </template>

          </el-table-column>
          <el-table-column label="单位名称" prop="name" align="left" width="100" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="产品型号" prop="model" align="left" width="100" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="箱号" prop="boxNo" align="left" width="100" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="箱名" prop="boxName" align="left" width="100" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="图号" prop="drawingNo" align="left" width="150" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="部件名称" prop="componentName" align="left" width="100" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="扫描状态" prop="scanStatus" align="left" width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.scanStatus === '未扫描'" type="info">未扫描</el-tag>
              <el-tag v-if="scope.row.scanStatus === '已扫描'" type="success">已扫描</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="扫描人" prop="scanUserId" align="left" width="100" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="扫描日期" prop="scanDate" align="left" width="150" :show-overflow-tooltip="true"
            :formatter="shzy.tableDateFormat">
          </el-table-column>
          <el-table-column label="规格" prop="specifications" align="left" width="150" :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column label="状态" prop="printStatus" align="left" width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.printStatus === '未打印'" type="info">未打印</el-tag>
              <el-tag v-if="scope.row.printStatus === '已打印'" type="success">已打印</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="打印日期" prop="printDate" align="left" width="150" :show-overflow-tooltip="true"
            :formatter="shzy.tableDateFormat">
          </el-table-column>
          <el-table-column label="打印条码" prop="printCode" align="left" width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="ViewPrintList(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="unit" align="left" width="100" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="数量" prop="qty" align="left" width="100" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="关闭备注" prop="remark" align="left" width="100" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="同步日期" prop="syncDate" align="left" width="150" :formatter="shzy.tableDateFormat"
            :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="addOrUpdateHandle(scope.row)" :disabled="scope.row.printStatus == '已打印'"
                icon="el-icon-printer">打印条码</el-button>
            </template>
          </el-table-column>
        </SHZY-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
          @pagination="initData" />
      </div>
    </div>
    <SHZY-Form v-if="formVisible" ref="SHZYForm" @refresh="refresh" />
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
    <printBarcode v-if="popupTableVisible" ref="printBarcode" @refresh="refreshlist" />
    <qrCode v-if="CodeVisible" ref="qrCode"  />
  </div>
</template>
<script>
import restAPI from "@/api/q1/business/pick";
import SHZYForm from "./Form.vue";
import ExportBox from "./ExportBox";
import printBarcode from "./printBarcode";
import qrCode from "./qrCode";
export default {
  components: { SHZYForm, ExportBox, printBarcode,qrCode },
  data() {
    return {
      showAll: false,
      query: {
        no: undefined,
        model: undefined,
        printStatus: undefined,
        scanStatus: undefined,
        boxNo: "",
        drawingNo: "",
        componentName: "",
        specifications: "",
      },
      list: [
        {
          printCode: "查看",
        },
      ],
      listLoading: true,
      multipleSelection: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      formVisible: false,
      exportBoxVisible: false,
      columnList: [
        { prop: "no", label: "做番号 " },
        { prop: "name", label: "单位名称" },
        { prop: "model", label: "产品型号" },
        { prop: "boxNo", label: "箱号" },
        { prop: "boxName", label: "箱名" },
        { prop: "drawingNo", label: "图号" },
        { prop: "componentName", label: "部件名称" },
        { prop: "specifications", label: "规格" },
        { prop: "unit", label: "单位" },
        { prop: "qty", label: "数量" },
        { prop: "remark", label: "备注" },
        { prop: "printDate", label: "打印日期" },
        { prop: "syncDate", label: "同步日期" },
        { prop: "scanStatus", label: "扫描状态" },
        { prop: "printStatus", label: "状态" },
        { prop: "scanUserId", label: "扫描人" },
        { prop: "scanDate", label: "扫描日期" },
      ],
      status: [
        { fullName: "未打印", id: "0" },
        { fullName: "已打印", id: "1" },
      ],
      ScanstatuList: [
        { fullName: "未扫描", id: "0" },
        { fullName: "已扫描", id: "1" },
      ],
      isPrint: [],
      isClose: [],
      //是否有做番号
      isSynchronization: [],
      popupTableVisible: false,
      printConfigId: "564705291665845573",
      CodeVisible:false,
    };
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || "";
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }

      //if (query.no) {
      restAPI.GetList(query).then((res) => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
      // } else {

      //     this.list = []
      //     this.total = 0
      //     this.listLoading = false
      // }
    },

    handleSelectionChange(val) {
      const res = val.map((item) => item.id);
      this.multipleSelection = res;
      this.isPrint = val.map((item) => item.printStatus);
      //this.isClose =  val.map(item => item.printStatus)
    },

    //打印
    handleBatchPrint() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: "error",
          message: "请选择一条数据",
          duration: 1500,
        });
        return;
      }

      if (this.isPrint.indexOf("已打印") != -1) {
        this.$message.error("所选数据存在已打印数据");
        return;
      }

      const ids = this.multipleSelection;
      let query = {
        exportType: 1,
        list: {
          printConfigId: this.printConfigId,
          ids: ids,
        },
      };

      this.$confirm("您确定要打印这些数据吗, 是否继续？", "提示", {
        type: "warning",
      })
        .then(() => {
          restAPI.PrintMultiple(query).then((res) => {
            const blob = new Blob([res], { type: "application/pdf" });
            const url = window.URL.createObjectURL(blob);
            window.open(`${url}#filename=Zy`, "_blank");

            this.initData();
          });
        })
        .catch(() => {
          this.initData();
        });
    },

    //关闭
    handleBatchClose() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: "error",
          message: "请选择一条数据",
          duration: 1500,
        });
        return;
      }
      // if (this.isClose.indexOf(1) != -1) {
      //     this.$message.error('所选数据存在已关闭数据')
      //     return
      // }
      const ids = this.multipleSelection;

      this.$prompt("", "请输入关闭原因", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "textarea",
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          if (!value) {
            this.$message({
              type: "error",
              message: "输入关闭原因",
              duration: 1500,
            });
            return;
          }

          restAPI.ClosPick(value, ids).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initData();
              },
            });
          });
        })
        .catch(() => { });
    },

    //打印弹框
    addOrUpdateHandle(data) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.SHZYForm.init({
          formDataId: data.id,
          printQty: 0, // 打印数量
          packageQty: data.qty, // 包装数量
          no: data.no, // 做番号
          drawingNo: data.drawingNo, // 图号
          componentName: data.componentName, // 部件名称
          specifications: data.specifications, // 规格
          model: data.model, // 产品型号
          boxNo: data.boxNo, // 箱号
          qty: data.qty, // 数量
        });
      });
    },

    exportData() {
      this.exportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.ExportBox.init(this.columnList);
      });
    },
    download(data) {
      let query = {
        ...data,
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };

      restAPI.ExportBox(query).then((res) => {
        if (!res.data.url) return;
        this.shzy.downloadFile(res.data.url);
        this.$refs.ExportBox.visible = false;
        this.exportBoxVisible = false;
      });
    },

    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },

    refresh(isrRefresh) {
      this.formVisible = false;
      if (isrRefresh) this.reset();
    },
    refreshlist(isrRefresh) {
      this.popupTableVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },

    ViewPrintList(id) {
      this.popupTableVisible = true;
      this.$nextTick(() => {
        this.$refs.printBarcode.init(id);
      });
    },
    //同步
    Synchronization() {
      this.isSynchronization = [];
      const no = this.query.no;
      if (no == undefined || no == "" || no == null) {
        this.$message({
          type: "error",
          message: "请输入做番号进行同步",
          duration: 1500,
        });
      } else {
        //console.log(this.isSynchronization);
        this.isSynchronization = this.list.some((item) => item.no === no);
        //console.log(this.isSynchronization);
        if (this.isSynchronization) {
          this.$confirm("当前做番号已同步，是否确认覆盖更新？", "提示", {
            type: "warning",
          })
            .then(() => {
              //console.log("调用同步接口true");
              restAPI.synchronization(no).then((res) => {
                console.log(res);
                this.$message({
                  type: "success",
                  message: res.msg,
                  onClose: () => {
                    this.initData();
                  },
                });
              });
            })
            .catch(() => {
              //this.initData();
            });
        } else {
          restAPI.synchronization(no).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initData();
              },
            });
          });
          //console.log("调用同步接口false");
        }
      }
    },
    //
    showCode(no){

      this.CodeVisible = true;
      this.$nextTick(() => {
        this.$refs.qrCode.init(no);
      });
    }
  },
};
</script>